<template>
    <div class="comment-container">
        <h3 class="title">评论详情</h3>
        <hr>
        <textarea placeholder="请输入评论内容(不超过120字)" maxlength="120"></textarea>
        <mt-button type="primary" size="large">发表评论</mt-button>
        <div class="comment-detail">
            <div class="comment-detail-info">
                <span>1楼(匿名)：</span>
                <span class="time"> 发表时间：2018-12-31 19:40:00</span>
            </div>
            <div class="comment-detail-content">
                我又想起你了
            </div>
        </div>
        <div class="comment-detail">
            <div class="comment-detail-info">
                <span>1楼(匿名)：</span>
                <span class="time"> 发表时间：2018-12-31 19:40:00</span>
            </div>
            <div class="comment-detail-content">
                我又想起你了
            </div>
        </div>
        <div class="comment-detail">
            <div class="comment-detail-info">
                <span>1楼(匿名)：</span>
                <span class="time"> 发表时间：2018-12-31 19:40:00</span>
            </div>
            <div class="comment-detail-content">
                我又想起你了
            </div>
        </div>
        <div class="comment-detail">
            <div class="comment-detail-info">
                <span>1楼(匿名)：</span>
                <span class="time"> 发表时间：2018-12-31 19:40:00</span>
            </div>
            <div class="comment-detail-content">
                我又想起你了
            </div>
        </div>
        <div class="comment-detail">
            <div class="comment-detail-info">
                <span>1楼(匿名)：</span>
                <span class="time"> 发表时间：2018-12-31 19:40:00</span>
            </div>
            <div class="comment-detail-content">
                我又想起你了
            </div>
        </div>
        <div class="comment-detail">
            <div class="comment-detail-info">
                <span>1楼(匿名)：</span>
                <span class="time"> 发表时间：2018-12-31 19:40:00</span>
            </div>
            <div class="comment-detail-content">
                我又想起你了
            </div>
        </div>
        <mt-button type="danger" size="large" plain>加载更多</mt-button>
    </div>

</template>

<script>
    export default {
        name: "Comment"
    }
</script>

<style scoped>
.comment-container .title{
    font-size: 18px;
    color:#6d6d72;
}
.comment-container textarea{
    height: 85px;
    margin: 0;
    font-size: 14px;
}
.comment-container .comment-detail{
    margin: 5px 0;
    border: 1px solid #ccc;
}
.comment-container .comment-detail .comment-detail-info {
    font-size: 12px;
    background-color: #1d2124;
    line-height: 20px;
    color: wheat;
    padding: 0 5px;
}
.comment-container .comment-detail .comment-detail-info .time{
    float: right;
}
.comment-container .comment-detail .comment-detail-content{
   padding: 10px 20px;
   font-size: 14px;
    color: #222222;
}
</style>